<template>
	<el-dialog :model-value="visible" title="分配角色" :before-close="beforeClose">
		<el-form :model="ownForm">
			<el-form-item label="账号：" label-width="120px">
				<el-input v-model="ownForm.username" placeholder="请输入账号" />
			</el-form-item>
			<el-form-item label="姓名：" label-width="120px">
				<el-input v-model="ownForm.nickName" placeholder="请输入姓名" />
			</el-form-item>
			<el-form-item label="邮箱：" label-width="120px">
				<el-input v-model="ownForm.email" placeholder="请输入邮箱" />
			</el-form-item>
			<el-form-item label="密码：" label-width="120px">
				<el-input type="password" v-model="ownForm.password" placeholder="请输入密码" />
			</el-form-item>
			<el-form-item label="备注：" label-width="120px">
				<el-input type="textarea" v-model="ownForm.note" placeholder="请输入备注" />
			</el-form-item>

			<el-form-item label="是否启用：" label-width="120px">
				<el-radio-group v-model="ownForm.status" @change="changeFn">
					<el-radio :label="1">是</el-radio>
					<el-radio :label="0">否</el-radio>
				</el-radio-group>
			</el-form-item>
		</el-form>
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="handleCancel">取消</el-button>
				<el-button type="primary" @click="handleCancelEdit">确定</el-button>
			</span>
		</template>
	</el-dialog>
</template>

<script setup lang="ts">
import { ref, defineProps, defineEmits, watch } from "vue";
import type { IAdminListItem } from "@/types/global";
import type { Ref } from "vue";
// 接收父传过来的参数
const props = defineProps<{ visible: boolean; form: IAdminListItem }>();
const ownForm = ref({}) as Ref<IAdminListItem>;
const originForm = ref({}) as Ref<IAdminListItem>;
const changeFn = (e: any) => {
	ownForm.value.status = e;
};
watch(
	() => {
		return props.form;
	},
	(newVal) => {
		ownForm.value = { ...newVal };
		originForm.value = { ...newVal };
	},
	{ immediate: true }
);
const emit = defineEmits<{
	(event: "cancel"): void;
	(event: "confirm", form: IAdminListItem): void;
}>();
// 取消
const handleCancel = () => {
	emit("cancel");
	ownForm.value = { ...originForm.value };
};
const handleCancelEdit = () => {
	emit("confirm", ownForm.value);
};
// 模态框关闭前的回调props
const beforeClose = () => {
	handleCancel(); //重新调用关闭的事件
};
</script>

<style scoped></style>
